<template>
  <el-dialog
    title="合同加价"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    width="700px"
  >
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="加价名称" prop="markupsName">
        <el-input
          v-model.trim="queryParams.markupsName"
          placeholder="加价名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="nameList"
      ref="multipleTable"
      @current-change="handleCurrentChange"
    >
      
      <el-table-column width="40" label="ID" align="center" prop="id" />
      <el-table-column label="加价名称" align="center" prop="markupsName" />
      <el-table-column label="计价类型" align="center" prop="markupsType" />
      <el-table-column label="价格" align="center" prop="markupsValue" />
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="100">
            <template slot-scope="scope">
                <el-button :disabled="disableIds.includes(scope.row.id)" @click="selectItem(scope.row)" type="text" size="small">选择</el-button>
            </template>
        </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span> -->
  </el-dialog>
</template>

<script>
import { listMarkups } from "@/api/service/config-center/markups";
export default {
  props: {
    // 禁用的id集合
    disableIds: {
      type: Array,
      default: () => []
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        markupsName: null
      },
      total: 0,
      nameList: [],
      multipleSelection: [],
    };
  },
  methods: {
    selectItem(row) {
        this.$emit("onSubmit", row);
        this.handleClose();
    },
    handleClick(e) {
      this.getList()
    },
    handleCurrentChange(row) {
      this.rowData = row
    },
    handleSelect(selection, row) {
      this.rowData = row
      // 清除 所有勾选项
      this.$refs.multipleTable.clearSelection();
      // 当表格数据都没有被勾选的时候 就返回
      // 主要用于将当前勾选的表格状态清除
      if (selection.length == 0) return;
      this.$refs.multipleTable.toggleRowSelection(row, true);
    },
    handleSubmit() {
      this.$emit("onSubmit", this.rowData);
      this.handleClose();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleClose() {
      this.$emit("onClose");
    },
    handleQuery() {
      this.getList();
    },
    getList() {
      this.loading = true;
      listMarkups(this.queryParams).then((res) => {
        this.nameList = res.data.filter(item => item.enable);
        this.total = 0;
        this.loading = false;
      });
    },
  },
  watch: {
    dialogVisible(newValue, oldValue) {
      if (newValue) {
        this.multipleSelection = [];
        this.getList();
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
